<template>
  <div class="box">
    <h3>基本信息</h3>
    <el-row :gutter="40">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="135px"
      >
        <el-col :span="11">
          <!-- <el-form ref="form" :model="form" label-width="135px"> -->
          <el-form-item label="标名：" prop="name" required="">
            <el-input
              v-model="ruleForm.name"
              placeholder="请输入标名"
            ></el-input>
          </el-form-item>
          <el-form-item label="借款方：" prop="userPhone" required="">
            <el-row>
              <el-col :span="18">
                <el-input
                  v-model="ruleForm.userPhone"
                  placeholder="请输入账号"
                ></el-input>
                </el-col>
              <el-col :span="4" :offset="1">
                <el-button type="primary" @click="dialogTableVisible = true"
                  >选择</el-button
                >
                <el-dialog title="选择借款人" :visible.sync="dialogTableVisible">
                  <div class="rowone">
                        <el-row>
                        <el-col :span="7" :offset="1">
                          <el-input
                            placeholder="搜索借款人名字"
                            suffix-icon="el-icon-search"
                            v-model="input1"
                            class="inputLeft"
                          >
                          </el-input>
                        </el-col>
                        <el-col :span="2" :offset="11">
                        <el-button type="primary">新增借款用户</el-button>
                        </el-col>
                      </el-row>
                      </div>
                  <el-table :data="gridData" 
                  :header-cell-style = "{background:'#F2F2F2',color:'#333333'}">
                    <el-table-column
                          width="100"
                          property="name"
                          label="借款方"
                          align="center"
                        ></el-table-column>
                        <el-table-column
                          width="150"
                          property="telpnumber"
                          label="手机号/用户名"
                          align="center"
                        ></el-table-column>
                        <el-table-column
                          width="100"
                          property="state"
                          label="用户状态"
                          align="center"
                        ></el-table-column>
                        <el-table-column
                          width="100"
                          property="genre"
                          label="身份类型"
                          align="center"
                        ></el-table-column>
                        <el-table-column
                          width="155"
                          property="date"
                          label="添加的时间"
                          align="center"
                        ></el-table-column>
                        <el-table-column
                          width="100"
                          property="operation"
                          label="操作"
                          align="center"
                        ></el-table-column>
                  </el-table>
                </el-dialog>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="年利率：" prop="apr" required="">
            <el-input
              type="test"
              v-model="ruleForm.apr"
              placeholder="请输入0-24之间的数，保留两位小数"
            >
              <template slot="append">%</template>
            </el-input>
          </el-form-item>
          <el-form-item label="期限天数：" prop="loanPeriod" required="">
            <el-input v-model="ruleForm.loanPeriod" placeholder="请输入天数">
              <template slot="append">天</template>
            </el-input>
          </el-form-item>
          <el-form-item label="借款起息方式：" prop="interestWay" required="">
            <el-radio v-model="ruleForm.interestWay" label="成立计息"
              >成立计息</el-radio
            >
          </el-form-item>
          <el-form-item label="逾期罚息利率：" prop="overdue" required="">
            <el-input
              v-model="ruleForm.overdue"
              placeholder="请输入1-24之间的数，保留两位小数"
            >
              <template slot="append">%</template>
            </el-input>
          </el-form-item>
          <el-form-item label="资金用途：" prop="useOfFunds" required="">
            <el-row>
              <el-select
                v-model="ruleForm.useOfFunds"
                clearable
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-row>
          </el-form-item>
          <!-- </el-form> -->
        </el-col>

        <el-col :span="11">
          <!-- <el-form ref="form" :model="form" label-width="135px"> -->
          <el-form-item label="风险等级：" prop="riskLevel" required="">
            <el-row>
              <el-select
                v-model="ruleForm.riskLevel"
                clearable
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in risk"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-row>
          </el-form-item>

          <el-form-item label="借款总金额：" prop="total" required="">
            <el-input
              v-model="ruleForm.total"
              placeholder="请输入500-500万之间的整数"
            ></el-input>
          </el-form-item>

          <el-form-item label="还款方式：" prop="repayment" required="">
            <el-row>
              <el-select
                v-model="ruleForm.repayment"
                clearable
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in refund"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-row>
          </el-form-item>

          <el-form-item
            label="借款管理费月率："
            prop="loanMgrInterestRate"
            required=""
          >
            <el-input
              v-model="ruleForm.loanMgrInterestRate"
              placeholder="请输入1-24之间的数，保留两位小数"
            >
              <template slot="append">%</template>
            </el-input>
          </el-form-item>

          <el-form-item label="借款类型：" prop="loanType" required="">
            <el-row>
              <el-select
                v-model="ruleForm.loanType"
                clearable
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in genre"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-row>
          </el-form-item>

          <el-form-item label="还款来源：" prop="asd" required="">
            <el-input
              v-model="ruleForm.asd"
              placeholder="请输入借款人还款来源"
            ></el-input>
          </el-form-item>
          <!-- </el-form> -->
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>

<script>
// import TableVue from '../admin/Table.vue';
export default {
  name: "Loann",
  props: {
    formData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    //判断标名不能为空
    let validatename = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入标名"));
      } else {
        if (this.ruleForm.name !== "") {
          callback();
        }
      }
    };
    //还款来源
    let asd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入还款来源"));
      } else {
        if (this.ruleForm.name !== "") {
          callback();
        }
      }
    };
    //期限天数
    let loanPeriod = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入天数"));
      } else {
        if (this.ruleForm.name !== "") {
          callback();
        }
      }
    };
    //年利率，保留两位小数
    let apr = (rule, value, callback) => {
      // const reg = /^(\d|[1-9]\d|24)(\.\d{1,2})?$/ ;
      const reg = /^(1?[0-9]|2[0-4])(\.\d{1,2})?$/g;

      if (value === "") {
        callback(new Error("年利率不能为空"));
      } else if (!reg.test(value) && value != "") {
        callback(new Error("请输入正确的年利率"));
      } else {
        callback();
      }
    };
    //逾期罚息利率
    let overdue = (rule, value, callback) => {
      // const reg = /^(\d|[1-9]\d|24)(\.\d{1,2})?$/ ;
      const reg = /^(1?[0-9]|2[0-4])(\.\d{1,2})?$/g;

      if (value === "") {
        callback(new Error("年利率不能为空"));
      } else if (!reg.test(value) && value != "") {
        callback(new Error("请输入正确的罚息利率"));
      } else {
        callback();
      }
    };
    //管理月费率
    let loanMgrInterestRate = (rule, value, callback) => {
      // const reg = /^(\d|[1-9]\d|24)(\.\d{1,2})?$/ ;
      const reg = /^(1?[0-9]|2[0-4])(\.\d{1,2})?$/g;

      if (value === "") {
        callback(new Error("年利率不能为空"));
      } else if (!reg.test(value) && value != "") {
        callback(new Error("请输入正确的管理月费率"));
      } else {
        callback();
      }
    };
    //输入借款总金额
    let total = (rule, value, callback) => {
      let num = parseInt(value);

      if (value === "") {
        callback(new Error("借款金额不能为空"));
      } else if (num < 500 || num > 5000000) {
        callback(new Error("请输入正确的借款金额"));
      } else {
        callback();
      }
    };

    return {
      ruleForm: this.getInitRoleForm(),
      input1:"",
      rules: {
        name: [
          // { required: true, message: '请输入活动名称', trigger: 'blur' },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
          { validator: validatename, trigger: "blur" },
        ],
        total: [{ validator: total, trigger: "blur" }],
        loanPeriod: [{ validator: loanPeriod, trigger: "blur" }],
        asd: [{ validator: asd, trigger: "blur" }],

        overdue: [{ validator: overdue, trigger: "blur" }],
        loanMgrInterestRate: [
          { validator: loanMgrInterestRate, trigger: "blur" },
        ],
        apr: [{ validator: apr, trigger: "blur" }],

        interestWay: [
          { required: true, message: "请选借款起息方式", trigger: "change" },
        ],
        useOfFunds: [
          { required: true, message: "请选择资金用途", trigger: "change" },
        ],
        riskLevel: [
          { required: true, message: "请选择风险等级", trigger: "change" },
        ],
        repayment: [
          { required: true, message: "请选择还款方式", trigger: "change" },
        ],
        loanType: [
          { required: true, message: "请选择借款类型", trigger: "change" },
        ],
        userPhone: [
          { required: true, message: "请选择借款方账号", trigger: "change" },
        ],
      },
      options: [
        {
          value: "短期周转",
        },
        {
          value: "生意周转",
        },
        {
          value: "购物消费",
        },
        {
          value: "长期周转",
        },
        {
          value: "其他用途",
        },
      ],
      useOfFunds: "",
      risk: [
        {
          value: "极低",
        },
        {
          value: "较低",
        },
        {
          value: "中等",
        },
        {
          value: "中高",
        },
        {
          value: "高",
        },
      ],
      riskLevel: "",
      refund: [
        {
          value: "一次性还款",
        },
        {
          value: "等额本息",
        },
        {
          value: "按月付息到期还本",
        },
        {
          value: "按天还款",
        },
      ],
      repayment: "",
      genre: [
        {
          value: "新增",
        },
        {
          value: "续贷",
        },
        {
          value: "资产处理",
        },
      ],
      loanType: "",
      // gridData: [
      //   {
      //     name: "企业1号",
      //     telpnumber: "13800009999",
      //     state: "正常",
      //     genre: "个人用户",
      //     date: "2017-01-02 12:00",
      //     operation: "选择借款人",
      //   },
      //   {
      //     name: "企业1号",
      //     telpnumber: "13800009999",
      //     state: "锁定",
      //     genre: "个人用户",
      //     date: "2017-01-02 12:00",
      //     operation: "选择借款人",
      //   },
      //   {
      //     name: "企业1号",
      //     telpnumber: "13800009999",
      //     state: "锁定",
      //     genre: "个人用户",
      //     date: "2017-01-02 12:00",
      //     operation: "选择借款人",
      //   },
      //   {
      //     name: "企业1号",
      //     telpnumber: "13800009999",
      //     state: "正常",
      //     genre: "个人用户",
      //     date: "2017-01-02 12:00",
      //     operation: "选择借款人",
      //   }],
      //   input1: '',
      gridData: [
        {
          name: "企业1号",
          telpnumber: "13800009999",
          state: "正常",
          genre: "个人用户",
          date: "2017-01-02 12:00",
          operation: "选择借款人",
        },
        {
          name: "企业1号",
          telpnumber: "13800009999",
          state: "锁定",
          genre: "个人用户",
          date: "2017-01-02 12:00",
          operation: "选择借款人",
        },
        {
          name: "企业1号",
          telpnumber: "13800009999",
          state: "锁定",
          genre: "个人用户",
          date: "2017-01-02 12:00",
          operation: "选择借款人",
        },
        {
          name: "企业1号",
          telpnumber: "13800009999",
          state: "正常",
          genre: "个人用户",
          date: "2017-01-02 12:00",
          operation: "选择借款人",
        }
      ],
      dialogTableVisible: false,
    };
  },
  watch: {
    formData() {
      this.ruleForm = this.getInitRoleForm();
    },
  },
  beforeCreate() {
    const defaultData = {
      apr: "", //年利率
      asd: "工资", //还款方式
      interestWay: "成立计息",
      loanMgrInterestRate: "", //借款管理月利率
      loanPeriod: "", //借款期限 （天）
      loanType: "续贷", //借款类型
      name: "", //标名
      overdue: "", //逾期罚息利率
      repayment: "一次性还款", //还款方式
      riskLevel: "较低", //风险等级
      termType: "天", //期限类型（天）
      total: "", //借款金额
      useOfFunds: "资金周转", //资金用途
      userPhone: "", //借款人联系方式
    };

    this.getInitRoleForm = function () {
      if (this._.isEmpty(this.formData)) return defaultData;
      let obj = {},
        formCopy = this._.cloneDeep(this.formData);
      for (let key in defaultData) {
        obj[key] = formCopy[key];
      }
      return obj;
    };
  },
};
</script>

<style scoped>
.box {
  width: 1100px;
}
.row {
  padding: 10px;
}
.rowone {
  margin-top:-20px;
  margin-bottom: 15px;
}
.inputLeft {
  margin-left: -30px;
}
</style>
